{% extends "base.html" %}
{# Copyright The IETF Trust 2015, All Rights Reserved #}
{% load origin %}
{% load django_bootstrap5 static %}
{% block title %}Customize Workflow for {{ group.acronym }} {{ group.type.name }}{% endblock %}
{% block pagehead %}
    <link rel="stylesheet" href="{% static "ietf/css/list.css" %}">
{% endblock %}
{% block content %}
    {% origin %}
    {% load ietf_filters %}
    <h1>
        Customize Workflow
        <br>
        <small class="text-body-secondary">{{ group.acronym }} {{ group.type.name }}</small>
    </h1>
    <p class="my-3">
        Below you can customize the Internet-Draft states and tags used in the
        <a href="{{ group.about_url }}">{{ group.acronym }} {{ group.type.name }}</a>.
        Note that some states are
        mandatory for group operation and cannot be deactivated.
    </p>
    {% if group.type_id == "wg" %}
        <p>
            You can see the default Working Group I-D State Diagram
            in
            <a href="{% url 'ietf.doc.views_doc.document_html' name='rfc6174' %}">Section 4.1 of RFC6174</a>.
        </p>
    {% endif %}
    <h2 class="mt-5">States</h2>
    {% with states|first as state %}
        <a href="{% url 'ietf.doc.views_help.state_help' type=state.type_id %}"
           class="btn btn-info my-3">Help on states</a>
    {% endwith %}
    <table class="table table-sm table-striped tablesorter">
        <thead>
            <tr>
                <th scope="col" data-sort="state">State</th>
                <th scope="col" data-sort="next">Next states</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            {% for state in states %}
                <tr class="{% if not state.used %}inactive{% endif %}">
                    <td class="name">
                        <span {% if not state.used %}class="text-decoration-line-through"{% endif %}
                              title="{{ state.desc|striptags|truncatewords:40 }}">
                            {{ state.name }}
                        </span>
                        {% if not state.used %}<span class="text-body-secondary">(not used in {{ group.acronym }})</span>{% endif %}
                        {% if state.mandatory %}<span class="badge rounded-pill text-bg-success">Mandatory</span>{% endif %}
                    </td>
                    <td class="next-states">
                        {% if state.used_next_states %}
                            {% for n in state.used_next_states %}
                                <span title="{{ n.desc|striptags|truncatewords:40 }}">{{ n.name }}</span>
                                {% if not forloop.last %}<br>{% endif %}
                            {% endfor %}
                        {% else %}
                            None
                        {% endif %}
                        <br>
                        <button class="btn btn-primary btn-sm {% if not state.used %}disabled{% endif %}"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#nexts{{ state.pk }}"
                                aria-expanded="false"
                                aria-controls="nexts{{ state.pk }}">
                            Customize <i class="bi bi-caret-down"></i>
                        </button>
                        <form id="nexts{{ state.pk }}"
                              class="mt-2 set-next-states collapse out"
                              method="post">
                            {% csrf_token %}
                            <label>Select the next states:</label>
                            {% for checked, default, s in state.next_states_checkboxes %}
                                <div class="form-check {% if not s.used %}inactive{% endif %}">
                                    <input class="form-check-input" type="checkbox" name="next_states" value="{{ s.pk }}" id="id-{{ s.pk }}-{{ state.pk }}" {% if checked %} checked{% endif %}>
                                    <label class="form-check-label" for="id-{{ s.pk }}-{{ state.pk }}">
                                        {{ s.name }}
                                        {% if default %}<span class="badge rounded-pill text-bg-secondary">Default</span>{% endif %}
                                    </label>
                                </div>
                            {% endfor %}
                            <input type="hidden" name="state" value="{{ state.pk }}">
                            <input type="hidden" name="action" value="setnextstates">
                            <button class="mt-2 btn btn-primary btn-sm" type="submit">Save</button>
                        </form>
                    </td>
                    <td>
                        {% if not state.mandatory %}
                            <form class="set-state text-end" method="post">
                                {% csrf_token %}
                                <input type="hidden" name="state" value="{{ state.pk }}">
                                <input type="hidden" name="action" value="setstateactive">
                                <input type="hidden" name="active" value="{{ state.used|yesno:"0,1" }}">
                                <button class="btn btn-{% if state.used %}danger{% else %}success{% endif %} btn-sm"
                                        type="submit"
                                        title="Click to {% if state.used %}de{% endif %}activate this state">
                                    {% if state.used %}
                                        Deactivate
                                    {% else %}
                                        Activate
                                    {% endif %}
                                </button>
                            </form>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <h2 class="mt-5">Tags</h2>
    <table class="table table-sm table-striped tablesorter">
        <thead>
            <tr>
                <th scope="col" data-sort="tag">Tag</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            {% for tag in tags %}
                <tr>
                    <td class="name">
                        <span {% if not tag.used %}class="text-decoration-line-through"{% endif %}>{{ tag.name }}</span>
                        {% if not tag.used %}<span class="text-body-secondary">(not used in {{ group.acronym }})</span>{% endif %}
                    </td>
                    <td>
                        <form class="set-tag text-end" method="post">
                            {% csrf_token %}
                            <input type="hidden" name="tag" value="{{ tag.pk }}">
                            <input type="hidden" name="action" value="settagactive">
                            <input type="hidden" name="active" value="{{ tag.used|yesno:"0,1" }}">
                            <button class="btn btn-{% if tag.used %}danger{% else %}success{% endif %} btn-sm"
                                    type="submit"
                                    title="Click to {% if tag.used %}de{% endif %}activate this tag">
                                {% if tag.used %}
                                    Deactivate
                                {% else %}
                                    Activate
                                {% endif %}
                            </button>
                        </form>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}
{% block js %}
    <script src="{% static "ietf/js/list.js" %}"></script>
{% endblock %}